<template>
  <div class="redcard">
    <vheader pageTitle="红包卡券" :isBack="true"></vheader>
    <div class="redcard-tab">
      <span @click="clickHandle(1)" :style="select === 1 ? activeClass : ''">我的红包</span>
      <span @click="clickHandle(2)" :style="select === 2 ? activeClass : ''">加息券</span>
    </div>
    <div class="redcard-red" v-show="select === 1">
      <ul v-if="reds.length !== 0">
        <p class="redcard-red-total">累计可用红包总额：{{ totalRed }} 元</p>
        <li v-for="red in reds">
          <card v-bind="red"></card>
        </li>
      </ul>
      <no-data v-else>暂时没有可用的红包哦~</no-data>
    </div>
    <div class="redcard-card" v-show="select !== 1">
      <ul v-if="cards.length !== 0">
        <li v-for="card in cards">
          <card
            v-bind="card"
            color="#3fadf9"></card>
        </li>
      </ul>
      <no-data v-else>暂时没有可用的加息券哦~</no-data>
    </div>
  </div>
</template>

<script>
  import vheader from 'components/common/comHead'
  import card from 'components/common/card'
  import noData from 'components/common/noData'

  export default {
    data () {
      return {
        select: 1,
        activeClass: {
          color: '#fff',
          background: '#ff4133'
        },
        reds: [],
        cards: []
      }
    },
    computed: {
      totalRed () {
        let total = 0
        this.reds.forEach((item) => {
          total += item.couponMoney
        })
        return total.toFixed(2)
      }
    },
    methods: {
      clickHandle (index) {
        if (index === 1) {
          this.select = 1
        } else {
          this.select = 2
        }
      }
    },
    created () {
      const userAcctKey = this.getUserCookie('acctKey')
      if (this.$route.query.tab) {
        this.clickHandle(Number(this.$route.query.tab))
      }
      this.$http.get(`/api/member/memberCouponList?acctKey=${userAcctKey}&currentPage=1&numPerPage=999&couponType=-1`)
        .then((res) => {
          if (res.data.success) {
            console.log(res.data.data)
            res.data.data.list.forEach((item) => {
              if (item.couponType === 1) {
                this.reds.push(item)
              } else if (item.couponType === 2) {
                this.cards.push(item)
              }
            })
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    components: {
      vheader,
      card,
      noData
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/tool.scss';
  @import '../../common/scss/_variable.scss';

  .redcard {
    text-align: center;
    font-size: 0;
    &-tab {
      box-sizing: border-box;
      display: inline-block;
      margin: 40px 0;
      border: 1px solid $base-ff6c00;
      border-radius: 1000px;
      font-size: 30px;
      text-align: center;
      font-size: 0;
      span {     
        display: inline-block;
        width: 280px;
        height: 66px;
        font-size: 30px;
        line-height: 66px;
        user-select: none;
        color: $base-ff6c00;
      }
      span:nth-child(1) {
        border-radius: 1000px 0 0 1000px;
      }
      span:nth-child(2) {
        border-radius: 0 1000px 1000px 0;
      }
    }
    &-red,
    &-card {
      ul {
        li {
          width: 690px;
          height: 252px;
          margin: 0 auto 30px auto;
          text-align: left;
        }
      }
      &-total {
        font-size: 30px;
        color: $base-333;
        text-align: left;
        text-indent: 30px;
        margin-bottom: 40px;
      }
    }
    &-nodata {
      font-size: 28px;
    }
  }
</style>
